<template>
  <el-dialog :append-to-body="true" :close-on-click-modal="false" :visible.sync="dialog" style="top:5px;" title="客户供应商选择列表" width="80%">
    <!--表格渲染-->
    <DataGridTable
      v-loading="loading"
      :sup_this="sup_this"
      :data="data.rtnList"
      :show-row-number="true"
      :total="total"
      :multi-select="false"
      :all-define-columns="['cpyCode','bankAccount','bankName','officeAddress','recAddress','mainContacor','mobile','telphone','cerCode']"
      grid-id="customSupplySelectListGridId"
      style="width: 100%"
      max-height="400"
      height="400"
      table-ref="userTable"
      @current-change="handleCurrentChange">
      <el-table-column v-if="multiSelect" prop="cpyCode" width="90px">
        <template slot="header" slot-scope="scope">
          <el-checkbox v-model="checkAll" @change="handleCheckAllChange" />
        </template>
        <template slot-scope="scope">
          <el-button v-if="selectedRows[scope.row.id]" type="danger" size="mini" @click="cpyCheckSelectChange(scope.row)">取消</el-button>
          <el-button v-else type="primary" size="mini" @click="cpyCheckSelectChange(scope.row)">选择</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="cpyLongName" label="公司全称" width="200px">
        <template slot="header" slot-scope="scope">
          <el-input v-model="cpyLongName" clearable placeholder="输入名称回车过滤" style="width: 100%;" class="filter-item" @keyup.enter.native="cpyFilterQuery"/>
        </template>
      </el-table-column>
      <el-table-column slot="cpyCode" prop="cpyCode" label="公司编号" />
      <DataGridColumn slot="bankAccount" prop="bankAccount" label="银行账号" />
      <DataGridColumn slot="bankName" prop="bankName" label="银行名称称" />
      <DataGridColumn slot="officeAddress" prop="officeAddress" label="办公地址" />
      <DataGridColumn slot="recAddress" prop="recAddress" label="收货地址" />
      <DataGridColumn slot="mainContacor" prop="mainContacor" label="主要联系人" />
      <DataGridColumn slot="mobile" prop="mobile" label="手机号" />
      <DataGridColumn slot="telphone" prop="telphone" label="电话" />
      <el-table-column slot="cerCode" prop="cerCode" label="证书编号"/>
    </DataGridTable>
    <div slot="footer" class="modal-footer">
      <el-button type="text" @click="cancel">取消</el-button>
      <el-button :loading="loading" type="primary" @click="doSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import checkPermission from '@/utils/permission'
import initData from '@/mixins/initData'
import customSupply from '@/api/base/CustomSupply'
import { parseTime } from '@/utils/index'

export default {
  mixins: [initData],
  props: {
    multiSelect: {
      type: Boolean,
      default: false,
      requried: false
    },
    cpyOwnerType: {
      type: String,
      default: 'custom', // custom, supply, ALL
      required: false
    }
  },
  data() {
    return {
      loading: false,
      dialog: false,
      selectedRows: [],
      selectedRow: {},
      sup_this: this,
      cpyLongName: '',
      checkAll: false
    }
  },
  created() {
    this.url = customSupply.loadDataUrl()
    this.paramBean.cpyOwnerTypeList = [this.cpyOwnerType, 'both']
  },
  mounted() {
    // this.loadData()
  },
  methods: {
    parseTime,
    checkPermission,
    initLoadData() {
      this.checkAll = false
      this.selectedRows = []
      this.selectedRow = {}
      this.loadData()
      this.dialog = true
    },
    loadData() {
      this.paramBean.cpyLongName = this.cpyLongName
      this.init()
    },
    async beforeInit() {
      this.checkAll = false
      return true
    },
    afterInit(res) {
    },
    cpyFilterQuery() {
      this.loadData()
    },
    handleSelectionChange(val) {
      this.selectedRows = val
    },
    doSubmit() {
      this.loading = true
      if (this.multiSelect) {
        const _selectRows = this.selectedRows
        const tmpKeys = Object.keys(_selectRows)
        const tmpRows = []
        for (const tmpKey of tmpKeys) {
          tmpRows.push(_selectRows[tmpKey])
        }
        this.$emit('customSupplySelectCallback', tmpRows, this)
      } else {
        this.$emit('customSupplySelectCallback', this.selectedRow, this)
      }
    },
    cancel() {
      this.dialog = false
      this.loading = false
    },
    handleCurrentChange(val) {
      this.selectedRow = val
    },
    handleCheckAllChange(isChecked) {
      const tmpSelectRows = this.selectedRows
      if (isChecked) {
        this.data.rtnList.forEach(row => {
          tmpSelectRows[row.id] = row
        })
      } else {
        // 取消
        this.data.rtnList.forEach(row => {
          delete tmpSelectRows[row.id]
        })
      }
      this.selectedRows.splice(this.selectedRows.length)
      // this.trees[idx] = 'x' // 无响应
      // this.$set(this.trees,idx,'x') // 有响应
      // this.trees.splice(idx,1,'x') // 有响应
    },
    cpyCheckSelectChange(userRow) {
      if (!this.selectedRows[userRow.id]) {
        // 选择
        this.selectedRows[userRow.id] = userRow
      } else {
        delete this.selectedRows[userRow.id]
      }
      this.selectedRows.splice(this.selectedRows.length)
    }
  }
}
</script>
